<template>
	<view class="return-goods-info" v-if="isShow">
		<view class="order-holder">
			<view class="order-info">
				<text>订单编号{{orderInfo.orderId}}</text>
			</view>
			<view class="list">
				<view class="item">
					<image class="img" :src="orderInfo.productPic" mode=""></image>

					<view class="right">
						<view class="name">
							<text>{{orderInfo.productName}}</text>
							<text>￥{{orderInfo.productPrice}}</text>
						</view>

						<view class="count">
							<text>编号：{{orderInfo.orderSn}}</text>
							<text>x{{orderInfo.productCount}}</text>
						</view>

						<view class="type">
							<text>规格：</text>
							<text v-for="item in JSON.parse(orderInfo.productAttr)">{{item.key}}:{{item.value}} </text>
						</view>
					</view>
				</view>
			</view> 

		<view class="sum-price">
				<view class="sum">
					<text>时间：{{orderInfo.createTime}}</text>
					<text>合计：{{orderInfo.returnAmount}}元</text>
				</view>
			</view>
		</view>

		<view class="return-holder">
			<view class="list">
				<view class="item">
					<text>退单数量</text>
					<view class="input">
						{{orderInfo.productCount}}
					</view>
				</view>
				<view class="item">
					<text>退单原因</text>
					<view class="input">
						{{orderInfo.reason}}
					</view>
				</view>
				<view class="item">
					<text>退单公司</text>
					<view class="input">
						{{address}}
					</view>
				</view>
				<view class="item">
					<text>问题描述</text>
					<view class="input">
						{{orderInfo.description}}
					</view>
				</view>
				
				<view class="img-upload">
					<view class="title">
						温馨提醒:
					</view>
					<view class="text">
						上传图片总大小不能超过3m，单个文件大小不能超过1m，图片总个数不能超过3张
					</view>
					
					<view class="img-holder">
						<view class="img-box" v-for="(item,index) in orderInfo.productPic.split(',')">
							<image class="img" :src="item" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="return-holder">
			<view class="list">
				<view class="item">
					<text>订单状态</text>
					<view class="input">
						<text v-if="orderInfo.status==0">等待处理</text>
						<text v-if="orderInfo.status==1">确认退货,等待发货</text>
						<text class="red" v-if="orderInfo.status==2">已退款</text>
						<text class="red" v-if="orderInfo.status==3">已拒绝</text>
						<text v-if="orderInfo.status==9">拒绝退货</text>
					</view>
				</view>
				<view class="item">
					<text>处理人</text>
					<view class="input">
						{{orderInfo.handleMan}}
					</view>
				</view>
				<view class="item">
					<text>处理时间</text>
					<view class="input">
						{{orderInfo.handleTime}}
					</view>
				</view>
				<view class="item">
					<text>处理意见</text>
					<view class="input">
						{{orderInfo.handleNote}}
					</view>
				</view>
				<view class="item">
					<text>接收人</text>
					<view class="input">
						{{orderInfo.receiveMan}}
					</view>
				</view>
				<view class="item">
					<text>接收时间</text>
					<view class="input">
						{{orderInfo.receiveTime}}
					</view>
				</view>
				<view class="item">
					<text>备注</text>
					<view class="input">
						{{orderInfo.receiveNote}}
					</view>
				</view>
				<view class="item">
					<text>客服电话</text>
					<view class="input">
						{{orderInfo.returnPhone}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		requestGetReturnInfo,
		requestCompanyAddrss
	} from 'api/user/order.js';

	export default {
		data() {
			return {
				orderId: '',
				orderInfo: {},
				isShow:false,
				address:''
			};
		},
		methods: {
			// 获取商品信息
			getInfo() {
				requestGetReturnInfo(this.orderId).then(res => {
					console.log(res);
					this.orderInfo = res.data.orderReturnApply;
					this.isShow = true;
					this.getCompanyAddressList();
				})
			},
			// 获取地址列表
			getCompanyAddressList() {
				requestCompanyAddrss().then(res => {
					console.log(res);
					
					res.data.items.forEach(val=>{
						if(val.id === this.orderInfo.companyAddressId){
							this.address = val.addressName;
						}
					})
				})
			},
			
			
			
		},
		onLoad(e) {
			this.orderId = e.id;
			this.getInfo();
		}
	}
</script>

<style lang="scss" scoped>
	.return-goods-info {
		box-sizing: border-box;
		padding: 40rpx;
		width: 100%;

		.order-holder {
			box-sizing: border-box;
			margin: 30rpx 0;
			padding: 36rpx;
			border-radius: 24rpx;
			background-color: #fff;
			overflow: hidden;

			.order-info {
				display: flex;
				padding-bottom: 20rpx;
				justify-content: space-between;
				font-size: 24rpx;
				border-bottom: 1px solid #f1ece7;

				.red {
					color: #f00;
				}
			}

			.list {
				.item {
					box-sizing: border-box;
					padding: 30rpx 0;
					display: flex;
					align-items: center;
					width: 100%;
					border-bottom: 1px solid #f1ece7;

					.red{
						color:#f00;
					}
	
					.img {
						width: 162rpx;
						height: 162rpx;
					}

					.right {
						margin-left: 30rpx;
						flex: 1;

						.name {
							font-size: 13px;
							line-height: 37px;
							display: flex;
							justify-content: space-between;
						}

						.count {
							display: flex;
							justify-content: space-between;
							font-size: 22rpx;
							color: #8d8d8d;
							line-height: 30rpx;
							margin-top: 4rpx;
						}
					}
				}
			}

			.sum-price {
				float: right;
				width: 100%;
				margin-top: 20rpx;

				.sum {
					display: flex;
					justify-content: space-between;
				}

				.submit-btn {
					margin-left: 32rpx;
					margin-top: 20rpx;
					float: right;
					width: 124rpx;
					height: 50rpx;
					font-size: 26rpx;
					border: 2rpx solid #2d4f43;
					text-align: center;
					color: #2d4f43;
					border-radius: 10rpx;
					line-height: 50rpx;
				}
			}
		}

		.return-holder {
			box-sizing: border-box;
			margin: 30rpx 0;
			padding: 36rpx;
			background-color: #fff;
			overflow: hidden;

			.list {
				width: 100%;

				.item {
					display: flex;
					font-size: 24rpx;
					padding: 30rpx 0;
					border-bottom: 2rpx solid #f1ece7;
					text{
						width: 200rpx;
					}
					
					.input {
						margin-left: 100rpx;
						flex: 1;
						text-align: right;
					}
					
					textarea{
						text-align: left;
						width: 300rpx;
					}
				}
				
				.img-upload{
					padding: 30rpx 0;
					font-size: 24rpx;
					.title{
						color: #333333;
						font-weight: 600;
					}
					
					.text{
						
					}
					
					.img-holder{
						margin-top: 50rpx;
						display: flex;
						width: 100%;
						
						.upload-btn{
							display: flex;
							flex-shrink: 0;
							justify-content: center;
							align-items: center;
							flex-wrap: wrap;
							width: 120rpx;
							height: 120rpx;
							font-size: 24rpx;
							image{
								width: 80rpx;
								height: 80rpx;
							}
						}
						
						.img-box{
							margin-left: 32rpx;
							position: relative;
							.img{
								width: 120rpx;
								height: 120rpx;
							}
							
							.close{
								position: absolute;
								top: -10rpx;
								right: -10rpx;
								width: 34rpx;
								height: 34rpx;
							}
						}
					}
				}
			}
		}
		
		.submit-btn{
			margin: 120rpx auto;
			width: 540rpx;
			height: 100rpx;
			font-size: 30rpx;
			text-align: center;
			line-height: 95rpx;
			background: #354e44;
			color: #fff;
			border-radius: 28rpx;
		}
	}
</style>
